/*
 * @Author: hcluo
 * @Date: 2020-08-27 13:19:01
 * @LastEditors: hcluo
 * @LastEditTime: 2020-08-28 23:07:30
 * @Description:
 */
import React from 'react';
import { Link } from 'react-router-dom';
import Chart from '../common/commponents/MyChart';
import { Button } from '@wind/wind-ui';
const option = {
  legend: { bottom: 0 },
  tooltip: {},
  grid: {
    right: '10%',
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
};
let data = [
  { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
  { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
  { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
  { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 },
];

export default function WelcomePage() {
  return (
    <div className="home-welcome-page">
      <header className="app-header">
        <img src={require('../../images/rekit-react.png')} className="rekit-logo" alt="logo" />
        <h1 className="app-title">Welcome to Rekit React</h1>
      </header>
      <div className="app-intro">
        <h3>To get started:</h3>
        <ul>
          <li>
            Edit component <code>src/features/home/WelcomePage.js</code> for this page.
          </li>
          <li>
            Edit component <code>src/features/home/App.js</code> for the root container layout.
          </li>
          <li>
            To see examples, access:&nbsp;
            <Link to="/examples">/examples</Link>
          </li>
          <li style={{ height: '300px' }}>
            <Chart option={option} data={data}></Chart>
          </li>
          <li style={{ height: '300px' }}>
            <Button type="primary">button</Button>
          </li>
        </ul>
      </div>
    </div>
  );
}
